<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>阻止默认行为</title>
</head>
<body>
<div id="change" class="change">
    <a href="https://www.baidu.com" data-on:click.prevent="hrefClicked">有问题，百度一下</a>
</div>

<script !src="">
    function hrefClicked() {
        console.log("点击了 超链接");
    }

    function event_handling(element) {
        // 获取所有的属性
        let attributeNames = element.getAttributeNames();
        // console.log(attributeNames);

        for (let i = 0; i < attributeNames.length; i++) {
            // console.log(attributeNames[i]);

            if (attributeNames[i].indexOf("data-on:") === 0 || attributeNames[i].indexOf("@") === 0) {
                let start = null
                let event_name = null
                let modifier = null
                let event_code = null

                if (attributeNames[i].indexOf("data-on:") === 0){
                    start = attributeNames[i].indexOf(":")
                }
                else {
                    start = attributeNames[i].indexOf("@")
                }

                if (attributeNames[i].indexOf(".") !== -1) {
                    event_name = attributeNames[i].substring(start + 1, attributeNames[i].indexOf("."));
                    modifier = attributeNames[i].substring(attributeNames[i].indexOf(".") + 1)
                }

                else {
                    event_name = attributeNames[i].substring(start + 1)
                }

                event_code = element.getAttribute(attributeNames[i])

                console.log(event_name);
                console.log(event_code);
                console.log(modifier);

                element.addEventListener(event_name, function (event) {
                    if (modifier !== null) {
                        switch (modifier) {
                            case "stop":
                                event.stopPropagation()
                                break;
                            case "prevent":
                                event.preventDefault()
                                break
                            default:
                                break
                        }
                    }


                    eval(event_code + "()")
                })

                element.removeAttribute(attributeNames[i])
            }

        }
    }

    let element = document.querySelector("#change a");
    event_handling(element)

</script>
</body>
</html>